let li=document.querySelectorAll('li');
let ul=document.querySelector('ul');
var startPoint = 0;
var startEle = 0;

ul.style.width =li.length*100 + '%';
for(var i=0;i<li.length;i++){
	li[i].style.width = (1/li.length * 100-12) + '%';
};

var w=li[0].offsetWidth;



ul.ontouchstart=function(e){
	startPoint = e.targetTouches[0].pageX;
	startEle = ul.offsetLeft;
}

ul.ontouchmove=function(e){
	var currPoint = e.targetTouches[0].pageX;
	var disX = currPoint - startPoint;
	var left = startEle + disX;
	ul.style.left = left + 'px';
	
	
	// console.log(ul.style.left);
	console.log(ul.offsetLeft);
	// if(disX>0){
	// 	ul.style.left = 0 + 'px';
	//  } 
	let wit = ul.offsetLeft;
	
	
	if(wit<=-w/3&&wit>-w*4/3){
		li[2].className='.active';
	}
	
},

ul.ontouchend=function(){
	let left = ul.offsetLeft;
	if(left>-w/3){
		ul.style.left = 0 + 'px';
	}else if(left<=-w/3&&left>-w*4/3){
		ul.style.left =-w*2/3 + 'px';
		
		
	}else if(left<=-w*4/3&&left>-w*7/3){
		ul.style.left =-w*5/3 + 'px';
	}else if(left<=-w*7/3&&left>-w*10/3){
		ul.style.left =-w*8/3 + 'px';
	}else if(left<=-w*8/3){
		ul.style.left =-w*8/3 + 'px';
	}
	
	
}
		
		
